<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="//at.alicdn.com/t/font_1191386_1d4khruylrx.js"></script>
    <script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.14.1/dist/av-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js"></script>
    <script src="./script/writ_code_.animation.js"></script>
    <link rel="stylesheet" href="./style/resume_style.css">
    <title>简历</title>
    <style id="styleid"></style>
</head>

<body>
<div id="loading_animation" class="loading_animation">
    <div id="set_loading"></div>
    <pre id="code" class="code code_display"></pre>
</div>
<div id="bdy" class="bdy">
    <div id="top_nav" class="top_nav">
        <div class="top_nav_inner clearfix">
            <a class="logo" href="#" alt='logo'>
                <span class="rs">RS</span>
                <span class="card">card</span>
                <!-- 知识点：两个相连的span标签换行和不换行是有空格区别，浏览器在换行的span标签默认加一个空格 -->
            </a>
            <nav>
                <ul class="clearfix">
                    <li class="active"><a href="#about_me">关于</a></li>
                    <li>
                        <a href="#about_skill">技能</a>
                        <ul class="nav_list_ul">
                            <li>js</li>
                            <li>css</li>
                            <li>html</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#about_work">作品</a>
                        <ul class="nav_list_ul">
                            <li>作品1</li>
                            <li>作品2</li>
                            <li>作品3</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#about_blog">博客</a>
                        <ul class="nav_list_ul">
                            <li>博客1</li>
                            <li>博客2</li>
                            <li>博客3</li>
                        </ul>
                    </li>
                    <li><a href="#about_calendar">日历</a></li>
                    <li><a href="#about_tel">联系方式</a></li>
                    <li><a href="#about_other">其他</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="banner">
        <div class="mask"></div>
    </div>
    <main class="main">
        <div data_x id="about_me" class="user_card">
            <div class="user_card_PicAndTxt clearfix">
                <div class="user_pic">
                    <img src="./img/avatar.jpg" alt="头像">
                </div>
                <div class="user_txt">
                    <span class="welcome">Hello</span>
                    <h1>系统班学生</h1>
                    <p>前端开发工程师</p>
                    <hr>
                    <dl>
                        <dt>年龄</dt>
                        <dd>99</dd>
                        <dt>所在城市</dt>
                        <dd>北京</dd>
                        <dt>邮箱</dt>
                        <dd>xxxx@163.com</dd>
                        <dt>手机</dt>
                        <dd>13812345678</dd>
                    </dl>
                </div>
            </div>
            <footer class="user_card_footer">
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo-copy"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg>
                </a>
            </footer>
        </div>
        <p class="download_center">
            <a class="download" href="./img/rs-cover.jpg" target="_blank" download="">下载 PDF 简历</a>
        </p>

        <p class="self_introduction">
            饥人谷前端系统班1904B学生练习作品，授课老师方方。
            <br> 技能：前端开发，Rails 开发，Node.js 开发
        </p>
    </main>
    <section data_x id="about_skill" class="self_skills">
        <h2>技能</h2>
        <ol class="clearfix">
            <li>
                <h3>HTML 5 &amp; CSS 3</h3>
                <div class="skill_bar">

                </div>
            </li>
            <li>
                <h3>JavaScript</h3>
                <div class="skill_bar">

                </div>
            </li>
            <li>
                <h3>jQuery</h3>
                <div class="skill_bar">

                </div>
            </li>
            <li>
                <h3>Vue</h3>
                <div class="skill_bar">

                </div>
            </li>
            <li>
                <h3>React</h3>
                <div class="skill_bar">

                </div>
            </li>
            <li>
                <h3>HTTP</h3>
                <div class="skill_bar">

                </div>
            </li>
        </ol>
    </section>
    <section data_x id="about_work" class="works">
        <h2>作品集</h2>
        <nav>
            <ol class="clearfix">
                <li id="works_bar1">所有</li>
                <li id="works_bar2">框架</li>
                <li id="works_bar3">原生JS&amp;CSS</li>
            </ol>
            <div class="works_bar">
                <div id="works_bar_inner" class="works_bar_inner"></div>
            </div>
        </nav>
        <div class="works_list clearfix">
            <div>
                <img src="./img/1.jpg" alt="作品1">
            </div>
            <div>
                <img src="./img/2.jpg" alt="作品2">
            </div>
            <div>
                <img src="./img/3.jpg" alt="作品3">
            </div>
        </div>
    </section>
    <section class="msgs">
        <h2>留言</h2>
        <ol id="msg_list"></ol>
        <form id="postmesg">
            <label>姓名：</label>
            <input type="text" name="name">
            <label>内容：</label>
            <input type="text" name="content">
            <input type="submit" value="提交">
        </form>
    </section>
</div>
<script>

    function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update(time);
    }

    requestAnimationFrame(animate);

    let str = `
        /*

        * hi你好，欢迎！！！！！！！测试一下。

        */

        * {
            transition: all 1s;
        }

        /* 来一条边框 */
        #code {
            border: 1px solid #aaa;
        }

        /* 来一点呼吸动画效果 */
        #code {
            animation: breath 0.5s infinite alternate-reverse;
        }

        @keyframes breath{
            0%{
                box-shadow: 0 0 10px rgba(0,0,0,1)
              }
            100%{
                box-shadow: 0 0 10px rgba(0,0,0,0.2)
                }
            }

        /* 来一点内边距 */
        #code {
            padding-top: 25px;
        }

        #code {
            padding-right: 25px;
        }

        #code {
            padding-bottom: 200px;
        }

        #code {
            padding-left: 25px;
        }

        /*
        * 稍等片刻页面准备中
        *
        *
        *
        *
        *
        *
        *
        *
        *
        *
        *
        *
        */
        `;
</script>
<script src="./script/loading_animation.js"></script>
<script src="./script/about_work.js"></script>
<script src="./script/scroll_animation.js"></script>
<script src="./script/navs_animation.js"></script>
<script src="./script/postmesg.js"></script>
</body>
</html>